{% load static %}

<link REL="SHORTCUT ICON" HREF="{% static "images/home.png" %}"/>

<!DOCTYPE html>
<html>
<head>
    <script src="/static/ckeditor/ckeditor/ckeditor.js"></script>
    <meta name="baidu-site-verification" content="WmM9Nymwhq" />
    <link href="https://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
{#	<script type="text/javascript" src="https://lib.h-ui.net/jquery.form/3.51.0/jquery.form.min.js"></script>#}
    {% block mycss %}
    {% endblock %}

    <title>
        {% block title %}
            耕读第 - 小张个人博客 - 记录学习笔记分享生活日记的个人博客网站
        {% endblock %}
    </title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="origin">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    {% block meta %}
    {% endblock %}

    <link media="screen and (max-width: 580px)" href="{% static 'css-theme/' %}{{ THEME }}{{ '/base-small-screen.css' }}" rel="stylesheet" >
    <link media="screen and (max-width: 580px)" href="{% static 'css-theme/' %}{{ THEME }}{{ '/index-small-screen.css' }}" rel="stylesheet" >

    <link media="screen and (min-width: 580px) and (max-width: 1000px)" href="{% static 'css-theme/' %}{{ THEME }}{{ '/base-middle-screen.css' }}" rel="stylesheet" >
    <link media="screen and (min-width: 580px) and (max-width: 1000px)" href="{% static 'css-theme/' %}{{ THEME }}{{ '/index-middle-screen.css' }}" rel="stylesheet" >


    <link media="screen and (min-width: 1000px)" href="{% static 'css-theme/' %}{{ THEME }}{{ '/base-big-screen.css' }}" rel="stylesheet" >
    <link media="screen and (min-width: 1000px)" href="{% static 'css-theme/' %}{{ THEME }}{{ '/index-big-screen.css' }}" rel="stylesheet" >


    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

    <script src="{% static 'js/modernizr.js' %}"></script>
    <script src="{% static 'js/scrollReveal.js' %}"></script>
    <script src="{% static 'js/article/request-image.js' %}"></script>
    <script src="{% static 'js/map/echarts.min.js' %}"></script>
    <script src="{% static 'js/map/china.js' %}"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

    <SCRIPT>
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
        })
        function getWidth() {
            var winWidth;
            if(window.innerWidth) {
                winWidth = window.innerWidth;
            } else if((document.body) && (document.body.clientWidth)) {
                winWidth = document.body.clientWidth;
            }
            return winWidth;
        }
        toastr.options = {
            closeButton: false,
            debug: false,
            progressBar: false,
            onclick: null,
            showDuration: "300",
            hideDuration: "1000",
            timeOut: "2000",
            extendedTimeOut: "1000",
            positionClass: "toast-top-center",
      };
    </SCRIPT>
</head>
<body>
<header>
    <script>
        var a_idx = 0;
        jQuery(document).ready(function($) {
            $("body").click(function(e) {
                var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
                var $i = $("<span></span>").text(a[a_idx]);
                a_idx = (a_idx + 1) % a.length;
                var x = e.pageX,
                y = e.pageY;
                $i.css({
                    "z-index": 1024,
                    "top": y - 20,
                    "left": x,
                    "position": "absolute",
                    "font-weight": "bold",
                    "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
                });
                $("body").append($i);
                $i.animate({
                    "top": y - 180,
                    "opacity": 0
                },
                1500,
                function() {
                    $i.remove();
                });
            });

            $.ajax({
                    type:'GET',
                    url:'{% url 'statistic:get' %}',
                    datatype:JSON,
                    success:function (data) {
                        draw(data);
                    },
                    error:function () {
                        console.log('ajax刷新分页数据失败！');
                    }
                });

            //初始化echarts实例
            function draw(data) {
                result = $.parseJSON(data);
                let visitData = []
                for (let i = 0; i < result.data.length; ++i) {
                    visitData.push([result.data[i].x, result.data[i].y, result.data[i].count, result.data[i].city])
                }
                let optionMap = {
                     tooltip: {
                         /*返回需要的信息*/
                         formatter: function (param) {
                             const value = param.value;
                             return '' +
                                 '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px"> ' +
                                 value[3] + '(' + value[2] + ')' +
                                 '</div>';
                         }
                     },
                    geo: {
                        map: 'china',
                        label: {emphasis: {show: false}},
                        roam: true,
                        itemStyle: {
                            normal: {areaColor: '#ffffff', borderColor: 'rgba(66, 203, 232, 0.63)'},
                            emphasis: {areaColor: '#00ff'}
                        }
                    },
                    series: [{
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: visitData,
                        symbolSize: function (data) {
                            let size = [];
                            for (let i = 0; i <= 12; i++) {
                                size.push(i);
                            }
                            let idx = parseInt(data[2] / 10 + 1, 10);
                            if (idx > 12){
                                idx = 12;
                            }
                            return size[idx];
                        },
                        itemStyle: { //基调颜色
                            normal: {
                                color: function (data) {
                                    let idx = parseInt(data.data[2], 10);
                                    idx = 130 - idx;
                                    if (idx < 0) {
                                        idx = 0;
                                    }

                                    let delta = Number(idx).toString(16);
                                    delta += "";
                                    if (delta.length < 2) {
                                        delta += "0";
                                    }
                                    return "#FF" + delta + delta;
                                }
                            }
                        },
                    }]
                };
                var myChart = echarts.init(document.getElementById('site-statistic'));
                myChart.setOption(optionMap);
            }
        });
    </script>

<div style="display: flex">
    <div class="statistic-bar">
        <div id="site-statistic"></div>
        <p style="text-align: center">您是小站的第<span style="color: red"> {{ VISIT_COUNT }} </span>位访客，欢迎~</p>
    </div>
    <div class="blog" style="">
        <div class="logo" data-scroll-reveal="enter right over 1s">
            <a><b>愿你历尽千帆，归来仍是少年</b></a>
        </div>
        <div class="top-nav" data-scroll-reveal="enter bottom over 0.8s after 0.8s">
            <a href="{% url 'home:home' %}">
                <span>首页</span>
            </a>
            <a href="/aboutme/" class="about-me-nav">
                <span>关于我</span>
            </a>

            <a href="/articles/programing">
                <span>程序设计</span>
            </a>

{#            <a href="/articles/programing">#}
{#                <span>宝宝成长记</span>#}
{#            </a>#}

            <a href="/photos/">
                <span>视频相册</span>
            </a>

            <a href="{% url 'document:list' %}" class="document-nav">
                <span>文档资源</span>
            </a>

            <a href="{% url 'gbook:list' %}" >
                <span>留言</span>
            </a>
            <div class="inner-search form-group">
                <input type="text" class="form-control" id="name" placeholder=" 站内搜索...">
            </div>
        </div>
        <div>
            {% block content %}
            {% endblock %}
        </div>
    </div>
</div>
<div style="background-color:#2a2a32; color: white">
    <div>
        <div class="my-links">
            <span>联系我：</span>
            <a style="color: white" href="https://github.com/meiqizhang/DesertHawk" target="_blank">github</a>
            <a style="color: white" href="https://gitee.com/meiqizhang/DesertHawk" target="_blank">gitee</a>
            <a style="color: white" href="https://blog.csdn.net/zhangqi_gsts" target="_blank">csdn</a>
            <a style="color: white">QQ<img style="width:0; height: 0; position: absolute" src="https://blog-1251916339.cos.ap-beijing.myqcloud.com/cover-pic/qq-QR.png"></a>
            <a style="color: white">微信<img style="width:0; height: 0; position: absolute" src="https://blog-1251916339.cos.ap-beijing.myqcloud.com/cover-pic/wechat-QR.png"></a>
        </div>
        <div class="out-links">
        </div>
    </div>
    <footer style="margin-bottom: 10px">
        <div>
            <img src="https://blog-1251916339.cos.ap-beijing.myqcloud.com/cover-pic/flag.png" style="width: 100px; height: 70px">
        </div>
        <div style="margin-top: 10px">
            <a style="color: white" href="http://beian.miit.gov.cn">粤ICP备20054363号</a> | 博客已运行<span class="run_time" style="color: white"></span>
        </div>
    </footer>
</div>


<script>
     $(document).ready(function(){
         $.ajax({
             type:'GET',
             url: '/linking/list/',
             success:function (data) {
                 for (let i in data.links) {
                     let link = data.links[i]
                     $(".out-links").append('<a id=' + link.id + ' href="' + link.href + '" target="_blank">' + link.name + '</a>')
                 }
                 $('.out-links > a').unbind("click").click(function (){
                     console.log($(this))
                     $.ajax({
                         type:'GET',
                         url: '/linking/click/?id=' + $(this).attr("id"),
                         success:function (data) {
                         },
                     });
                     window.open($(this).attr("href"))
                 })
             },
         });

         $('.my-links > a').mouseenter(function (e) {
            let top = $(this).offset().top;
            let left = $(this).offset().left;
            let text = $(this).text()
            if (text === 'QQ' || text === "微信") {
                top -= 140
                left -= 45
                $(this).children("img").offset({ top: top, left: left}).css("width", "130px").css('height', '130px').css("-webkit-transition-duration", ".1s")
            }
        }).mouseout(function(){
             let text = $(this).text()
            if (text === 'QQ' || text === "微信") {
                $(this).children("img").css("width", "0").css('height', '0')
            }
        })
     })

    if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
        (function () {
            window.scrollReveal = new scrollReveal({reset: true});
        })();
    }

    $(function(){
        var start_time = 0;
        $.ajax({
            type:'GET',
            url: '/starttime/',
            datatype:JSON,
            async: false,
            success:function (timestamp) {
                start_time = timestamp;
                update_run_time();
            },
            error:function () {
                console.log('ajax刷新分页数据失败！');
            }
        })

        function update_run_time() {
            var startDate = parseInt(start_time);
            var endDate = parseInt(Date.parse(new Date()) / 1000);

            var seconds = endDate - startDate;
            var years = parseInt(seconds / (24 * 3600 * 356));
            if (years > 0){
                seconds = parseInt(seconds % (years * 24 * 3600 * 356));
            } else {
                years = 0;
            }

            var days = parseInt(seconds / (24 * 3600));
            if (days > 0) {
                seconds = parseInt(seconds % (days * 24 * 3600));
            } else{
                days = 0;
            }

            var hours = parseInt(seconds / 3600);
            if (hours > 0){
                seconds = parseInt(seconds % (hours * 3600));
            } else {
                hours = 0;
            }

            var minutes = parseInt(seconds / 60);
            if (minutes > 0){
				seconds = parseInt(seconds % 60);
            } else {
                minutes = 0;
            }

            var run = years + " 年 " + days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒";
            $(".run_time").html(run);
        }

        function showAuto(){
            if (start_time > 0){
                update_run_time();
            }
        }
        setInterval(showAuto, 1000);
    })
</script>

{% block my_js %}

{% endblock %}
</header>
</body>
</html>
